<template>
  <div>
    <div class="paycover" v-show="payCover"></div>
    <div class="pay_box_code" v-show="payCode">
      <p>请确认支付是否已经完成</p>
      <p>
        <span @click="onActCancel" class="repay">重新支付</span>
        <span @click="onActConfirm" class="pay_success">已完成支付</span>
      </p>
    </div>
    <incity-map ref="map" :class="mapClass"></incity-map>
    <div v-if="showPay">
      <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="false" :mask-closable="false" prevent-scroll @hide="payCancel">
        <md-popup-title-bar title="支付车费" ok-text cancel-text="取消" @cancel="payCancel"></md-popup-title-bar>
        <div class="taxiPayType">
          <p class="city_pay">
            合计费用
            <span>{{orderAmt}}元</span>
          </p>
          <p class="city_coupom" @click="cityCoupomBtn">
            优惠券
            <span>
              {{coupomName}}
              <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
            </span>
          </p>
          <p class="taxiPayAlt">
            ￥
            <span>{{lastOrderAmt}}</span>
          </p>
          <p class="taxiPayDetail" @click="chargesDetails">
            费用疑问
            <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
          </p>
          <p class="close_time">
            距离支付时间还剩
            <span>{{payCloseDate}}</span>
          </p>
          <div class="payType">
            <ul class="choice-payment-method">
              <li @click="paybalance">
                <img src="@/assets/imgs/snyc_zf_yezf.png" />
                <span>余额支付</span>
                <b>
                  <em>{{userAccount}}元</em>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'balance'}"></i>
                </b>
              </li>
              <li @click="payWx">
                <img src="@/assets/imgs/cz_wx_icon@2x.png" />
                <span>微信支付</span>
                <b>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'wechat'||paymentMethod == 'miniprogram'||paymentMethod=='h5wx'}"></i>
                </b>
              </li>
              <li @click="payAli" v-if="hasAlipay">
                <img src="@/assets/imgs/cz_zfb_icon@2x.png" />
                <span>支付宝支付</span>
                <b>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'alipay'}"></i>
                </b>
              </li>
            </ul>
          </div>
          <p class="taxi_pay" @click="cityPayBtn">确认支付</p>
        </div>
      </md-popup>
    </div>
    <div v-else>
      <md-popup id="popup-container" v-model="paypwdvalue" position="bottom">
        <md-popup-title-bar title="请输入支付密码" ok-text cancel-text="取消" @cancel="paypwdcancel"></md-popup-title-bar>
        <div class="keyBoardShow">
          <ul class="paypwd_box">
            <li>
              <span v-show="payPwd.length >= 1"></span>
            </li>
            <li>
              <span v-show="payPwd.length >= 2"></span>
            </li>
            <li>
              <span v-show="payPwd.length >= 3"></span>
            </li>
            <li>
              <span v-show="payPwd.length >= 4"></span>
            </li>
            <li>
              <span v-show="payPwd.length >= 5"></span>
            </li>
            <li>
              <span v-show="payPwd.length >= 6"></span>
            </li>
          </ul>
          <md-number-keyboard v-model="paypwdvalue" type="simple" @enter="onNumberEnter" @delete="onNumberDelete"></md-number-keyboard>
        </div>
        <!-- <div class="pay_box">
                    <md-codebox :mask="true" autofocus :maxlength="6" v-model="payPwd" @submit="paysubmit" />
        </div>-->
      </md-popup>
    </div>
  </div>
</template>

<script>
import { Popup, PopupTitleBar, Picker, Dialog, Codebox, Toast, InputItem, Icon, NumberKeyboard } from 'mand-mobile';
import IncityMap from './IncityMap';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import Loading from '@/components/loading';
import http from '@/common/http';
import XBack from 'xback';
import Pop from '@/views/incity/popup';
import { Base64 } from 'js-base64';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
const STORAGE_CALLED_PAY = 'CALLED_PAY';
const STORAGE_ORDER_NO = 'ORDER_NO';
// var Vconsole = require('vconsole');
// var cons = new Vconsole();
export default {
  name: 'incityOrderPay',
  components: {
    [Popup.name]: Popup,
    [IncityMap.name]: IncityMap,
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar,
    [Codebox.name]: Codebox,
    [Picker.name]: Picker,
    [NumberKeyboard.name]: NumberKeyboard,
    [Toast.name]: Toast
  },
  data() {
    return {
      value: '',
      mapClass: 'map100',
      payCover: false,
      payCode: false,
      paymentMethod: 'balance',
      showPay: true,
      paypwdvalue: false,
      payPwd: '',
      payType: '1004', // 支付方式
      coupomName: '',
      orderAmt: '',
      lastOrderAmt: '',
      userAccount: '',
      payCloseDate: '',
      incityPayTimer: null,
      xBack: null,
      PaymentStatusTimer: ''
    };
  },
  created() {
    this.value = true;
    if (this.$route.name === 'incityOrderPay') {
      this.mapClass = 'map';
    } else {
      this.mapClass = 'map100';
    }
    if (this.$route.query.orderNo) {
      let param = {
        orderNo: this.$route.query.orderNo
      };
      this.getIncityOrderInfo(param).then(() => {
        console.log(this.getIncityOrderDate);
        let startCoordinate = decryptByDESModeEBC(this.getIncityOrderDate.startLnglat).split(',');
        let endCoordinate = decryptByDESModeEBC(this.getIncityOrderDate.endLnglat).split(',');
        this.$refs.map.addStartMarker(startCoordinate, this.getIncityOrderDate.startPst);
        this.$refs.map.addEndMarker(endCoordinate, this.getIncityOrderDate.endPst);
        this.$refs.map.setFitView();
        if (this.getIncityOrderDate.couponType === '1') {
          // 使用优惠券
          this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
        } else if (this.getIncityOrderDate.couponType === '2') {
          // 有优惠券 不使用
          this.coupomName = '有可用优惠券';
        } else if (this.getIncityOrderDate.couponType === '3') {
          // 没有优惠券
          this.coupomName = '无可用优惠券';
        }
        if (this.getIncityOrderDate.orderAmt) {
          this.orderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.orderAmt));
        }
        if (this.getIncityOrderDate.lastOrderAmt) {
          this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
        }
        if (this.getIncityOrderDate.userAccount) {
          this.userAccount = this.getIncityOrderDate.userAccount;
        }
        this.incityPayTimer = setInterval(() => {
          let time = (parseInt(this.getIncityOrderDate.payCloseDate) - new Date().getTime()) / 1000;
          if (time > 0) {
            let minutes = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
            let seconds = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
            this.payCloseDate = minutes + ':' + seconds;
          } else {
            let params = {
              orderNo: this.$route.query.orderNo,
              duty: '0'
            };
            Loading.show();
            http.post('/pakj/city/cancleOrder', params).then(res => {
              Loading.hide();
              if (res.data.code === '000000') {
                Dialog.closeAll();
                this.value = false;
                clearInterval(this.incityPayTimer);
                this.incityPayTimer = null;
                this.$store.commit('resetIncity');
                this.xBack.uninit();
                this.$router.replace({
                  name: 'homeIncity'
                });
                this.payCloseDate = '00:00';
              }
            });
          }
        }, 1000);
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取订单号失败',
        confirmText: '确定'
      });
    }
    let calledPay = localStorage.getItem(STORAGE_CALLED_PAY);
    if (calledPay === '1') {
      this.payCover = true;
      this.payCode = true;
    }
    // 物理键返回
    this.xBack = XBack.init(window, event => {
      this.payCancel();
    });
  },
  beforeDestroy() {
    clearInterval(this.incityPayTimer);
    this.incityPayTimer = null;
  },
  methods: {
    ...mapActions(['incitySubmitPayment', 'getIncityOrderInfo']),
    payCancel() {
      Dialog.confirm({
        title: '提示',
        content: '是否取消订单',
        confirmText: '确定',
        onConfirm: () => {
          this.xBack.uninit();
          let params = {
            orderNo: this.$route.query.orderNo,
            duty: '0'
          };
          Loading.show();
          http.post('/pakj/city/cancleOrder', params).then(res => {
            Loading.hide();
            if (res.data.code === '000000') {
              Dialog.closeAll();
              this.value = false;
              clearInterval(this.incityPayTimer);
              this.incityPayTimer = null;
              this.$store.commit('resetIncity');
              this.$router.replace({
                name: 'MyAllot'
              });
            }
          });
        }
      });
    },
    paypwdcancel() {
      this.paypwdvalue = false;
      this.showPay = true;
      this.value = true;
    },
    paybalance() {
      // 选择余额支付
      this.paymentMethod = 'balance';
      this.payType = '1004';
    },
    payWx() {
      // 选择微信支付
      switch (Utils.getCurrentEnv()) {
        case 'mini':
          this.paymentMethod = 'miniprogram';
          break;
        case 'wx':
          this.paymentMethod = 'wechat';
          break;
        case 'h5':
          this.paymentMethod = 'h5wx';
          break;
      }
      this.payType = '1001';
    },
    payAli() {
      // 选择支付宝支付
      this.paymentMethod = 'alipay';
      this.payType = '1002';
    },
    cityPayBtn() {
      if (this.paymentMethod === 'balance') {
        // 余额支付
        this.showPay = false;
        this.paypwdvalue = true;
        this.value = false;
      } else if (this.paymentMethod === 'wechat') {
        // 微信支付
        let param = {
          payType: this.payType,
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: this.getIncityOrderDate.couponId
        };
        this.incitySubmitPayment(param)
          .then(() => {
            let params = this.getIncitySubmitPaymentDate.JSPParam;
            wx.config({
              debug: false,
              appId: params['appId'],
              timestamp: params['timestamp'],
              nonceStr: params['noncestr'],
              signature: params['signature'],
              jsApiList: ['chooseWXPay']
            });
            wx.ready(() => {
              wx.chooseWXPay({
                timestamp: params['timestamp'],
                nonceStr: params['noncestr'],
                package: 'prepay_id=' + params['package'], // TODO May need remove 'prepay\_id='
                signType: 'MD5', // TODO If this didn't work . Use 'SHA1'.
                paySign: params['paySign'],
                success: res => {
                  if (res.errMsg === 'chooseWXPay:ok') {
                    this.queryPaymentStatus();
                  }
                },
                fail: res => {
                  this.$store
                    .dispatch('getOrderPayStatus', this.$route.query.orderNo)
                    .then(() => {
                      Loading.hide();
                      window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
                    })
                    .catch(reason => {
                      Loading.hide();
                      Dialog.alert({
                        title: '错误',
                        content: '支付失败',
                        confirmText: '确定'
                      });
                    });
                }
              });
            });
          })
          .catch(reason => {
            Loading.hide();
            if (reason.message === '200008') {
              // 重复支付
              window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            } else {
              Loading.hide();
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'miniprogram') {
        // 小程序支付
        let param = {
          payType: this.payType,
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: this.getIncityOrderDate.couponId
        };
        this.incitySubmitPayment(param)
          .then(res => {
            let jsonStr = JSON.stringify(res);
            let base64str = Base64.encode(jsonStr);
            wx.miniProgram.redirectTo({
              url: '/pages/payment/payment?info=' + base64str
            });
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'h5wx') {
        // H5支付
        let param = {
          payType: this.payType,
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: this.getIncityOrderDate.couponId
        };
        this.incitySubmitPayment(param)
          .then(() => {
            localStorage.setItem(STORAGE_ORDER_NO, this.getIncityOrderDate.orderNo);
            localStorage.setItem(STORAGE_CALLED_PAY, '1');
            window.location.href = this.getIncitySubmitPaymentDate.JSPParam.mweb_url;
            // this.payCover = true;
            // this.payCode = true;
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'alipay') {
        // 支付宝支付
        let parameters = {
          payType: this.payType,
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: this.getIncityOrderDate.couponId
        };
        this.incitySubmitPayment(parameters)
          .then(() => {
            localStorage.setItem(STORAGE_ORDER_NO, this.$route.query.orderNo);
            localStorage.setItem(STORAGE_CALLED_PAY, '1');
            let htmlStr = this.getIncitySubmitPaymentDate.AlipayBody;
            const div = document.createElement('div'); // 创建div
            div.innerHTML = htmlStr; // 将返回的form 放入div
            document.body.appendChild(div);
            document.forms[0].submit();
            // this.payCover = true;
            // this.payCode = true;
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            } else {
              Loading.hide();
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      }
    },
    onActConfirm() {
      localStorage.removeItem(STORAGE_CALLED_PAY);
      localStorage.removeItem(STORAGE_ORDER_NO);
      this.payCover = false;
      this.payCode = false;
      Loading.show();
      this.queryPaymentStatus();
      // setTimeout(() => {
      //     Loading.hide();
      //     this.$store
      //         .dispatch('getOrderPayStatus', this.$route.query.orderNo)
      //         .then(() => {
      //             window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
      //         })
      //         .catch(reason => {
      //             Dialog.alert({
      //                 title: '错误',
      //                 content: '支付失败',
      //                 confirmText: '确定'
      //             });
      //         });
      // }, 1000);
    },
    onActCancel() {
      localStorage.removeItem(STORAGE_CALLED_PAY);
      localStorage.removeItem(STORAGE_ORDER_NO);
      this.payCover = false;
      this.payCode = false;
    },
    // 查询支付状态
    queryPaymentStatus() {
      let params = {
        type: '2',
        orderNo: this.getIncityOrderDate.orderNo
      };
      this.$store
        .dispatch('paymentStatus', params)
        .then(() => {
          Toast({
            content: '支付成功',
            duration: 2000,
            hasMask: true
          });
          Loading.hide();
          clearInterval(this.PaymentStatusTimer);
          setTimeout(() => {
            window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
          }, 2000);
        })
        .catch(error => {
          let str = error.toString().split(':');
          let code = str[1].trim();
          let msgText = str[2];
          if (code === '5') {
            // 正在查询支付结果
            Loading.show('正在查询支付结果');
            // this.$router.replace({
            //     name: 'IncityOrderPay',
            //     query: {
            //         orderNo: this.$route.query.orderNo
            //     }
            // });
            this.PaymentStatusTimer = setInterval(() => {
              this.queryPaymentStatus();
            }, 5000);
          } else if (code === '4') {
            // 支付失败
            Toast({
              content: '支付失败',
              duration: 2000,
              hasMask: true
            });
            Loading.hide();
            clearInterval(this.PaymentStatusTimer);
          }
        });
    },
    onNumberEnter(val) {
      if (this.payPwd.length < 6) {
        this.payPwd += val;
      }
      if (this.payPwd.length === 6) {
        this.createBalancePay();
      }
    },
    onNumberDelete() {
      if (this.payPwd === '') {
        return false;
      }
      this.payPwd = this.payPwd.substr(0, this.payPwd.length - 1);
    },
    createBalancePay() {
      let params = {
        payPwd: CryptoJS.MD5(this.payPwd).toString()
      };
      Loading.show();
      http.post('pakj/passenger/validatePayPwd', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          // this.showPay = true;
          // this.paypwdvalue = false;
          // this.value = false;
          let param = {
            payType: this.payType,
            orderNo: this.getIncityOrderDate.orderNo,
            userCouponId: this.getIncityOrderDate.couponId
          };
          this.incitySubmitPayment(param).then(() => {
            window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            // Dialog.alert({
            //     title: '提示',
            //     content: '支付成功',
            //     confirmText: '确定',
            //     onConfirm: () => {
            //         window.location.href = '/incity/detail?orderno=' + this.getIncityOrderDate.orderNo;
            //         this.$router.replace({
            //             name: 'incityDetail',
            //             query: {
            //                 orderno: this.getIncityOrderDate.orderNo
            //             }
            //         });
            //     }
            // });
          });
        } else if (res.data.code === '200028') {
          Dialog.confirm({
            title: '提示',
            content: '您未设置支付密码，请去设置支付密码',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'SetPayPwd'
              });
            }
          });
        } else {
          this.payPwd = '';
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    },
    // 费用疑问
    chargesDetails() {
      // Pop.createIncityChargesDetailsSelector().then(data => {});
      this.$router.push({
        name: 'IncityChargesDetails',
        query: {
          orderno: this.getIncityOrderDate.orderNo,
          user_coupon_id: this.getIncityOrderDate.couponId
        }
      });
    },
    // 使用优惠券
    cityCoupomBtn() {
      if (this.getIncityOrderDate.couponType === '1') {
        // 使用优惠券
        Pop.createIncityCouponSelector().then(data => {
          if (this.getIncityOrderDate.couponType === '2') {
            this.coupomName = '有可用优惠券';
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          } else {
            this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          }
        });
      } else if (this.getIncityOrderDate.couponType === '2') {
        // 有优惠券 不使用
        Pop.createIncityCouponSelector().then(data => {
          if (this.getIncityOrderDate.couponType === '2') {
            this.coupomName = '有可用优惠券';
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          } else {
            this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          }
        });
      } else if (this.getIncityOrderDate.couponType === '3') {
        // 没有优惠券
        Dialog.alert({
          title: '提示',
          content: '没有可用优惠券',
          confirmText: '确定'
        });
      }
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate', 'getIncitySubmitPaymentDate']),
    hasAlipay() {
      if (Utils.getCurrentEnv() === 'h5') {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="stylus">
.paycover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: #000;
  opacity: 0.5;
  z-index: 99999;
}

.pay_box_code {
  width: 500px;
  height: 200px;
  position: absolute;
  background-color: #fff;
  z-index: 100000;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -100px;
  border-radius: 7px;
}

.pay_box_code p {
  text-align: center;
  font-size: 30px;
  padding-top: 40px;
}

.repay {
  border: solid 1px #eee;
  padding: 15px 15px;
  border-radius: 7px;
}

.pay_success {
  padding: 15px 15px;
  color: #fff;
  background-color: #ff9617;
  margin-left: 10px;
  border-radius: 7px;
}

.keyBoardShow {
  height: 600px;
  background-color: #fff;
}

.paypwd_box {
  height: 110px;
  border-radius: 10px;
  border: 1px solid #979797;
  margin: 0px 30px;
}

.paypwd_box li {
  float: left;
  border-right: solid 1px #979797;
  width: 112px;
  height: 110px;
}

.paypwd_box li:nth-of-type(6) {
  border-right: none;
}

.paypwd_box li span {
  height: 28px;
  width: 28px;
  background-color: #333;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: 40px;
  left: 40px;
}

#popup-container {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .taxiPayType {
    background-color: #fff;
  }

  .pay_box {
    background-color: #fff;
    height: 550px;
    padding-top: 20px;
  }

  .taxiPayAlt {
    text-align: center;
    padding-top: 30px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt span {
    font-size: 40px;
  }

  .city_pay {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_pay span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .city_coupom {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_coupom span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .taxiPayDetail {
    text-align: center;
    font-size: 24px;
    color: #999;
    margin-top: 20px;
  }

  .choice-payment-method li {
    padding: 0px 30px;
    font-size: 26px;
    color: #666;
    line-height: 88px;
    height: 88px;
    border-bottom: #e0e0e0 solid 1px;
  }

  .choice-payment-method li img {
    width: 44px;
    height: 44px;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li span {
    margin-left: 20px;
  }

  .choice-payment-method li b {
    float: right;
    color: #999999;
    font-weight: 400;
  }

  .choice-payment-method li b em {
    margin-right: 10px;
    font-style: normal;
  }

  .choice-payment-right {
    display: inline-block;
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li b .active {
    background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 36px;
    height: 36px;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
  }

  .close_time {
    margin-top: 10px;
    text-align: center;
    font-size: 24px;
    color: #999;
  }

  .close_time span {
    color: #FF6917;
    margin-left: 5px;
  }

  .taxi_cost_text {
    color: #666;
    text-align: center;
    padding-top: 20px;
    font-size: 22px;
    padding-bottom: 20px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
  }

  .slider {
    width: 200vw;
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s ease-in-out;

    .container {
      background-color: #fff;
      height: 432px;
      width: 100vw;
      float: left;
      font-size: 22px;

      .hint {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 88px;
        font-size: 22px;
        color: color-text-caption;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .theme-str {
          color: theme-color;
        }
      }

      .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;

        .waiting-hint {
          display: -webkit-box;
          font-size: 22px;

          .hint-icon {
            width: 26px;
            height: 24px;
          }

          .hint-str {
            color: theme-color;
          }

          .waiting-hint {
            color: color-text-caption;
            max-width: 25em;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
